<template>
  <div class="calorieContent">
    <el-card>
      <el-page-header @back="router.back()">
        <template #content>
          <span class="text-large font-600 mr-3" style="color: #fff;"> {{ route.query.title }} </span>
        </template>
      </el-page-header>
    </el-card>
    <div class="calorieMain">
      <el-card style="background: black;">
        <div class="content">
          <div class="top">
            <div class="title">
              <h1>卡路里</h1>
              <h1>热量计算器</h1>
              <el-icon style="font-weight: 900px;font-size: 80px;">
                <Iphone />
              </el-icon>
            </div>
            <el-form label-width="0" style="flex: 1;padding-right: 10px;margin-bottom: 20px;color: #e59637;">
              <el-form-item label="" prop="sex" style="margin-top: 20px;">
                <span>请选择 您的性别：</span>
                <el-radio-group v-model="sex">
                  <el-radio :label="'1'" style="margin-right: 20px;color: #e59637;">男</el-radio>
                  <el-radio :label="'0'" style="color: #e59637;">女</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="" prop="sex" style="margin-top: 0px;">
                <span style="color: #666666;font-size: 12px;" v-if="sex == '1'">所用公式：卡路里 = 66 + (13.7 x 体重) + (5 x 身高) - (6.8 x 年龄)</span>
                <span style="color: #666666;font-size: 12px;" v-else>所用公式：卡路里 = 665 + (9.6 x 体重) + (1.8 x 身高) - (4.7 x 年龄)</span>
              </el-form-item>
              <el-form-item label="" prop="content" style="margin-top: 10px;">
                <span>请输入 您的年龄：</span>
                <el-input show-word-limit v-model="calorieAge" type="number" placeholder="请输入" maxlength="3" style="width: 80px;height: 40px;border-radius: 8px;" />
                <span style="margin-left: 8px;">身高(cm)：</span>
                <el-input show-word-limit v-model="calorieHeight" type="number" placeholder="请输入" maxlength="3" style="width: 80px;height: 40px;border-radius: 8px;" />
                <span style="margin-left: 8px;">体重(kg)：</span>
                <el-input show-word-limit v-model="calorieWidth" type="number" placeholder="请输入" maxlength="3" style="width: 80px;height: 40px;border-radius: 8px;" />
                <el-button type="info" class="btn" style="" @click="onturn">
                  计算
                </el-button>
              </el-form-item>
              <el-form-item label="" prop="content" style="margin-top: 20px;">
                <span>您每天需要的热量应该是：<span style="font-size: 22px;font-weight: 700;color: #FFFFFF;">{{ calorieResult == '' ? '--' : calorieResult }}</span></span>
                <span style="margin-left: 5px;">卡路里</span>
                <el-button type="danger" class="btn" style="" @click="clean" v-if="calorieAge || calorieHeight || calorieWidth">
                  重置
                </el-button>
              </el-form-item>
              <el-form-item label="" prop="content" style="margin-top: 20px;">
                <span style="font-size: 11px;opacity: 0.9;">* 如果要减肥的话：每日基本热量消耗-500(最多)就是每天的摄入热量</span>
              </el-form-item>
            </el-form>
          </div>
          <div class="middle">
            <el-form label-width="" style="display: flex;flex-direction: row;justify-content: space-around;flex-wrap: wrap;">
              <el-form-item label="主食类" prop="content" style="margin-bottom: 20px;">
                <el-select v-model="calorieGroup1" @change="changeSelected" placeholder="请选择" :no-data-text="'无数据'" style="width: 150px;height: 40px;">
                  <el-option
                    v-for="(item, index) in calorieGroup1List"
                    :key="index"
                    :label="(item.name as string)"
                    :value="`${item.name}-${item.value}`"
                    style="padding-left: 10px;padding-top: 8px;"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="肉食类" prop="content" style="margin-bottom: 20px;">
                <el-select v-model="calorieGroup2" @change="changeSelected" placeholder="请选择" :no-data-text="'无数据'" style="width: 150px;height: 40px;">
                  <el-option
                    v-for="(item, index) in calorieGroup2List"
                    :key="index"
                    :label="(item.name as string)"
                    :value="`${item.name}-${item.value}`"
                    style="padding-left: 10px;padding-top: 8px;"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="调味料" prop="content" style="margin-bottom: 20px;">
                <el-select v-model="calorieGroup3" @change="changeSelected" placeholder="请选择" :no-data-text="'无数据'" style="width: 150px;height: 40px;">
                  <el-option
                    v-for="(item, index) in calorieGroup3List"
                    :key="index"
                    :label="(item.name as string)"
                    :value="`${item.name}-${item.value}`"
                    style="padding-left: 10px;padding-top: 8px;"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="饮品类" prop="content" style="margin-bottom: 20px;">
                <el-select v-model="calorieGroup4" @change="changeSelected" placeholder="请选择" :no-data-text="'无数据'" style="width: 150px;height: 40px;">
                  <el-option
                    v-for="(item, index) in calorieGroup4List"
                    :key="index"
                    :label="(item.name as string)"
                    :value="`${item.name}-${item.value}`"
                    style="padding-left: 10px;padding-top: 8px;"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="脂肪类" prop="content" style="margin-bottom: 20px;">
                <el-select v-model="calorieGroup5" @change="changeSelected" placeholder="请选择" :no-data-text="'无数据'" style="width: 150px;height: 40px;">
                  <el-option
                    v-for="(item, index) in calorieGroup5List"
                    :key="index"
                    :label="(item.name as string)"
                    :value="`${item.name}-${item.value}`"
                    style="padding-left: 10px;padding-top: 8px;"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="蔬菜类" prop="content" style="margin-bottom: 20px;">
                <el-select v-model="calorieGroup6" @change="changeSelected" placeholder="请选择" :no-data-text="'无数据'" style="width: 150px;height: 40px;">
                  <el-option
                    v-for="(item, index) in calorieGroup6List"
                    :key="index"
                    :label="(item.name as string)"
                    :value="`${item.name}-${item.value}`"
                    style="padding-left: 10px;padding-top: 8px;"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="水果类" prop="content" style="margin-bottom: 20px;">
                <el-select v-model="calorieGroup7" @change="changeSelected" placeholder="请选择" :no-data-text="'无数据'" style="width: 150px;height: 40px;">
                  <el-option
                    v-for="(item, index) in calorieGroup7List"
                    :key="index"
                    :label="(item.name as string)"
                    :value="`${item.name}-${item.value}`"
                    style="padding-left: 10px;padding-top: 8px;"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="零食类" prop="content" style="margin-bottom: 20px;">
                <el-select v-model="calorieGroup8" @change="changeSelected" placeholder="请选择" :no-data-text="'无数据'" style="width: 150px;height: 40px;">
                  <el-option
                    v-for="(item, index) in calorieGroup8List"
                    :key="index"
                    :label="(item.name as string)"
                    :value="`${item.name}-${item.value}`"
                    style="padding-left: 10px;padding-top: 8px;"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <span style="color: #666666;font-size: 12px;position: absolute;right: 100px;">*数值有上下浮动仅供参考</span>
          </div>
          <div class="bottom">
            <el-form label-width="80px" style="flex: 1;padding-right: 10px;margin-bottom: 20px;">
              <el-form-item label="" prop="content" style="margin-top: 5px;">
                <span style="font-weight: 700;font-size: 20px;color: #e59637;">今日摄入：</span>
                <span style="font-weight: 700;font-size: 20px;margin-left: 150px;">今日还可摄入：<span style="color: #e59637;font-size: 32px;">{{ compCalorie }}</span> 卡路里</span>
                <span class="out" v-if="danger">超标</span>
                <el-input show-word-limit v-model="calorieText" placeholder="请输入内容后等待" type="textarea" style="margin-top: 15px;" disabled />
              </el-form-item>
              <el-form-item label="" prop="content" style="margin-top: 15px;">
                <span style="font-size: 16p;color: #e59637;">以上食物您将摄取的总热量为：<span style="font-size: 22px;font-weight: 700;color: #FFFFFF;">{{ calorieValue == '' ? '--' : calorieValue }}</span></span>
                <span style="font-size: 16p;color: #e59637;margin-left: 5px;">卡路里</span>
                <el-button type="danger" class="btn" @click="cleanText" v-if="calorieValue">
                  重置
                </el-button>
              </el-form-item>
            </el-form>
            <div style=";position: absolute;right: 100px;bottom: -300px;" v-if="overproof">
              <el-icon style="font-size: 180px;color: #F56C6C">
                <WarnTriangleFilled />
              </el-icon>
              <p style="margin-left: 10px;text-align: center;color: #F56C6C;font-weight: 700;font-size: 18px;">
                请注意控制摄入量！
              </p>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'


const route = useRoute()
const router = useRouter()

const sex = ref<any>('1')
const calorieAge = ref<any>('')
const calorieWidth = ref<any>('')
const calorieHeight = ref<any>('')
const calorieResult = ref<any>('')
const calorieText = ref<any>('')
const calorieValue = ref<any>('')
const compCalorie = ref<any>('--')
const danger = ref<boolean>(false)
const overproof = ref<boolean>(false)

const calorieGroup1 = ref<any>('')
const calorieGroup2 = ref<any>('')
const calorieGroup3 = ref<any>('')
const calorieGroup4 = ref<any>('')
const calorieGroup5 = ref<any>('')
const calorieGroup6 = ref<any>('')
const calorieGroup7 = ref<any>('')
const calorieGroup8 = ref<any>('')

const calorieGroup1List = ref<any[]>([
  { name: '白饭1碗', value: '263'},
  { name: '白粥1碗', value: '88'},
  { name: '皮蛋瘦肉粥1碗', value: '260'},
  { name: '面粉(干)100g', value: '360'},
  { name: '通心粉(干)100g', value: '368'},
  { name: '巨无霸1个', value: '530'},
  { name: '猪柳蛋1个', value: '430'},
  { name: '麦乐鸡1块', value: '50'},
  { name: '白面包1片', value: '75'},
  { name: '全麦面包1片', value: '65'},
  { name: '蛋挞1个', value: '220'},
  { name: '茶叶蛋1个', value: '73'},
  { name: '煎蛋1个', value: '105'},
  { name: '荷包蛋1个', value: '80'},
  { name: '油条1根', value: '70'},
])
const calorieGroup2List = ref<any[]>([
  { name: '牛肉100g', value: '114'},
  { name: '牛肉(半肥瘦)100g', value: '260'},
  { name: '鸡肉100g', value: '100'},
  { name: '烧鸡100g', value: '195'},
  { name: '虾肉100g', value: '90'},
  { name: '三文鱼100g', value: '130'},
  { name: '生蚝100g', value: '14'},
  { name: '鳕鱼100g', value: '75'},
  { name: '猪肉100g', value: '123'},
  { name: '午餐肉100g', value: '335'},
  { name: '香肠100g', value: '326'},
])
const calorieGroup3List = ref<any[]>([
  { name: '花生酱1茶匙', value: '24'},
  { name: '果酱1茶匙', value: '18'},
  { name: '老抽1茶匙', value: '5'},
  { name: '生抽1茶匙', value: '7'},
  { name: '蚝油1茶匙', value: '11'},
  { name: '白糖1茶匙', value: '14'},
  { name: '方糖1茶匙', value: '14'},
  { name: '醋1茶匙', value: '1'},
  { name: '辣椒油1茶匙', value: '19'},
  { name: '蕃茄酱1茶匙', value: '5'},
])
const calorieGroup4List = ref<any[]>([
  { name: '鲜橙汁1杯', value: '165'},
  { name: '可乐1罐', value: '178'},
  { name: '健怡可乐1罐', value: '39'},
  { name: '雪碧1罐', value: '147'},
  { name: '芬达1罐', value: '190'},
  { name: '宝矿力1罐', value: '88'},
  { name: '黑咖啡1杯', value: '5'},
  { name: '鲜奶1盒', value: '143'},
  { name: '低脂奶1盒', value: '125'},
  { name: '啤酒1罐', value: '95'},
  { name: '黑啤1罐', value: '160'},
  { name: '生啤1罐', value: '151'},
  { name: '红酒1杯', value: '83'},
  { name: '白酒1杯', value: '83'},
  { name: '清酒1杯', value: '106'},
  { name: '香槟1杯', value: '190'},
  { name: '珍珠奶茶1杯', value: '180'},
])
const calorieGroup5List = ref<any[]>([
  { name: '牛油1oz', value: '216'},
  { name: '花生油1oz', value: '265'},
  { name: '葵花籽油1oz', value: '240'},
  { name: '粟米油1oz', value: '270'},
  { name: '芝士1oz', value: '96'},
  { name: '脱脂芝士1oz', value: '11'},
  { name: '花生100g', value: '370'},
  { name: '腰果100g', value: '554'},
  { name: '开心果100g', value: '600'},
  { name: '核桃100g', value: '667'},
  { name: '杏仁100g', value: '572'},
  { name: '夏威夷果仁100g', value: '667'},
])
const calorieGroup6List = ref<any[]>([
  { name: '葱100g', value: '47'},
  { name: '大蒜100g', value: '40'},
  { name: '白菜100g', value: '17'},
  { name: '西红柿100g', value: '14'},
  { name: '鸡蛋1个', value: '75'},
  { name: '鸡白1个', value: '13'},
  { name: '鸡黄1个', value: '62'},
])
const calorieGroup7List = ref<any[]>([
  { name: '葡萄1粒', value: '4'},
  { name: '龙眼1粒', value: '3'},
  { name: '蓝莓1粒', value: '6'},
  { name: '荔枝1粒', value: '7'},
  { name: '牛油果1个', value: '380'},
  { name: '香蕉1个', value: '90'},
  { name: '水蜜桃1个', value: '70'},
  { name: '石榴1个', value: '140'},
  { name: '苹果1个', value: '55'},
  { name: '西瓜1片', value: '40'},
  { name: '柠檬1片', value: '20'},
])
const calorieGroup8List = ref<any[]>([
  { name: '朱古力条1条', value: '1108'},
  { name: '薯片100g', value: '555'},
  { name: '牛肉干100g', value: '475'},
  { name: '凤梨酥1个', value: '160'},
  { name: '原味百力滋1盒', value: '250'},
  { name: '话梅1粒', value: '15'},
])

const changeSelected = (val: any) => {
  if (calorieResult.value == '') {
    calorieGroup1.value = ''
    calorieGroup2.value = ''
    calorieGroup3.value = ''
    calorieGroup4.value = ''
    calorieGroup5.value = ''
    calorieGroup6.value = ''
    calorieGroup7.value = ''
    calorieGroup8.value = ''
    ElMessage({
      type: 'warning',
      message: '请先填写上面的信息计算您每日所需的卡路里！'
    })
    return
  }
  const name = val.split('-')[0]
  const value =  val.split('-')[1]
  calorieText.value = calorieText.value + name + '、'
  calorieValue.value = Number(calorieValue.value) + Number(value)
  calorieGroup1.value = ''
  calorieGroup2.value = ''
  calorieGroup3.value = ''
  calorieGroup4.value = ''
  calorieGroup5.value = ''
  calorieGroup6.value = ''
  calorieGroup7.value = ''
  calorieGroup8.value = ''
}

const onturn = () => {
  if (calorieAge.value == '' || calorieWidth.value == '' || calorieHeight.value == '') {
    ElMessage({
      type: 'warning',
      message: '必填信息不能为空！'
    })
  } else {
    // 男性：66 + (13.7*体重) + (5*身高) - (6.8*年龄)
    if (calorieAge.value == '1') {
      const result: any = (
        66 + (13.7 * Number(calorieWidth.value)) + (5 * Number(calorieHeight.value)) - (6.8 * Number(calorieAge.value))
      ).toFixed(1) // toFixed 四舍五入且保留一位小数
      calorieResult.value = result
    } else {
    // 女性：665 + (9.6*体重) + (1.8*身高) - (4.7*年龄)
      const result: any = (
        665 + (9.6 * Number(calorieWidth.value)) + (1.8 * Number(calorieHeight.value)) - (4.7 * Number(calorieAge.value))
      ).toFixed(1) // toFixed 四舍五入且保留一位小数
      calorieResult.value = result
    }
  }
}

const clean = () => {
  calorieAge.value = ''
  calorieWidth.value = ''
  calorieHeight.value = ''
  calorieResult.value = ''
}

const cleanText = () => {
  calorieText.value = ''
  calorieValue.value = ''
  compCalorie.value = '--'
  danger.value = false
  overproof.value = false
}

const overproofMore = () => {
  overproof.value = true
  setTimeout(() => {
    overproof.value = false
    setTimeout(() => {
      overproof.value = true
      setTimeout(() => {
        overproof.value = false
        setTimeout(() => {
          overproof.value = true
        }, 200)
      }, 200)
    }, 200)
  }, 200)
}

watch(() => calorieValue.value, () => {
  if (calorieResult.value && calorieValue.value) {
    compCalorie.value = (Number(calorieResult.value) - Number(calorieValue.value)).toFixed(1)
    if (Number(compCalorie.value) < 0) {
      danger.value = true
      overproofMore()
    }
  }
})

onMounted(() => {

})

</script>

<style lang="scss" scoped>
.calorieContent {
  width: 100%;

  .el-card {
    border-radius: $base-card-border-radius;
  }

  .calorieMain {
    margin-top: 20px;
    padding: 20px;

    .el-card {
      border-radius: 16px;
      box-shadow: 0px 4px 18px 0px rgba(248,216,82, 0.9);

      .content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        .top {
          flex: 1;
          margin-bottom: 20px;
          display: flex;
          flex-direction: row;

          :deep(.el-input__wrapper) {
            width: 200px;
            height: 40px;
            border: 1px solid #e59637;
            border-radius: 12px;
          }
          
          .title {
            width: 280px;
            color: #e59637;
            font-weight: 900;
            font-size: 23px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            h1 {
              margin-bottom: 10px;
            }
          }
          .btn {
            width: 78px;
            height: 38px;
            background-color: #e59637;
            border: 1px solid #e59637;
            border-radius: 8px;
            margin-left: 15px;
            color: black;
            font-size: 14px;
          }
          .btn :hover {
            font-size: 16px;
          }
        }
        .middle {
          flex: 1;
          border: 1px solid #e59637;
          border-radius: $base-card-border-radius;
          padding: 35px 0;
          height: auto;
          :deep(.el-input__wrapper) {
            border: none;
            background-color: #FFFFFF;
            border-radius: $base-card-border-radius;
          }
          :deep(.el-form-item__label) {
            color: #e59637;
            font-weight: 500;
            font-size: 16px;
          }
        }
        .bottom {
          flex: 1;
          margin-top: 15px;
          padding: 20px;
          :deep(.el-input__wrapper) {
            border: none;
            background-color: #FFFFFF;
            border-radius: $base-card-border-radius;
          }
          :deep(.el-textarea__inner) {
            width: 65%;
            height: 160px;
            border-radius: $base-card-border-radius;
          }
          .btn {
            width: 78px;
            height: 38px;
            background-color: #e59637;
            border: 1px solid #e59637;
            border-radius: 8px;
            margin-left: 35px;
            color: black;
            font-size: 14px;
          }
          .btn :hover {
            font-size: 16px;
          }
          .out {
            padding: 1px 14px;
            font-weight: 500;
            font-size: 14px;
            margin-left: 30px;
            color: #F56C6C;
            border: 1px solid #F56C6C;
            border-radius: 8px;
          }
        }
      }
    }
  }

}
</style>